import styled from "styled-components";

const DetailWrapper=styled.div`
height: 100%;
.top{
    padding: .1rem .2rem;
    text-align: center;
    background-color: white;
    height: .6rem;
    .nav{
        position: absolute;
        top: .6rem;
        left: .1rem;
        margin: 0;
        width: 1rem;
        border: 1px #eee solid;
        padding:.06rem .15rem ;
        border-radius: .3rem;
        li{
            float:left;
            padding-right:.05rem;
            img{
                width: .15rem;
                height: .15rem;
            }
            
        }
    }
    span{
        line-height: .4rem;
        font-size: .18rem;
    }
}

.content{
    overflow-y: scroll;
    height: calc(100% - .7rem);
    .pro_desc{
        text-align: center;
        margin-top: .12rem;
        background-color: white;
        padding: .1rem .12rem;

        h1{
            font-size: .18rem;
            font-weight:normal;
        }
        p{
            margin-top: .1rem;
            font-size: .3rem;
            font-weight: 300;
        }
    }
    .line{
        width: 100%;
        background-color: #F5F5F9;
        height: .1rem;
    }
    .brand{
        padding: .1rem .12rem;
        background-color: white;
        >p{
            font-size: .15rem;
            color: black;
        }
        p+p{
            color: #ccc;
            font-size: .12rem;
        }
    }
    .recommend{
        background-color: white;
        h1{
            font-size: .16rem;
            padding: .1rem .12rem;

            font-weight: normal;
        }
    }
}
.buy{
    padding: .1rem .12rem;
    width: 100%;
    height: .7rem;
    padding: .12rem .12rem;
    position: fixed;
    background-color: white;
    bottom: 0;
    button{
        width: 100%;
        height: 100%;
        background-color:#00CBCC;
        border: none;
        color: white;
    }
}
.buydetail{
    
    height:  calc(100% - 1.04rem);
    background-color: white;
    position: absolute;
    top: 1.04rem;
    left: 0;
    width: 100%;
    display: block;
    .del{
        position: absolute;
        right: .25rem;
        top:.07rem;
        font-size: .18rem;
        color: #ccc;
    }
    .good{
        padding: .1rem .1rem;
        display: flex;
        .good_img{
            border: 1px solid #ccc;
            width: 1.5rem;
            height: 1rem;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .good_info{
            margin-left: .2rem;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-content: space-between;
           
        }
    }
    .size{
        margin-top: .2rem;
        /* height: 100%; */
        background-color: #eee;
        padding: 0;
        padding-bottom: .1rem;
        margin-bottom: .1rem;
        ul{
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            li{
                width: 23%;
                height: 1rem;
                background-color: white;
                margin-left: .06rem;
                margin-top: .1rem;
                font-size: .16rem;
                text-align: center;
                line-height: .5rem;
                display: flex;
                flex-direction: column;
            }
            .aa{
                border: 2px solid black;     
            }
        }
    }

}
.active{
    display: none;
}
`
const SwiperDiv=styled.div`
    /* height: ${window.innerWidth * 0.666667}px; */
  /* height: 66.66667vw; */
  /* height: 0;
  padding-bottom:40%; */
`

const BuyWrapper=styled.div`
.addres{
    width: 100%;
    height: 1rem;
    background-color: white;
    padding: .12rem;

}
.good{
    display: flex;
    margin-top: .2rem;
    background-color: white;
    padding: .12rem;

    .goodimg{
        img{
            width: 1rem;
            height: .8rem;
        }
    }
    .info{
        margin-left: .15rem;
        p+p{
            span{
                margin-right: .1rem;
            }
        }
    }
}
.aaa{
    padding: .12rem;
    margin-top:.3rem;
    img{
        width: 100%;
        height: 100%;
    }
}
.buy{
    padding: .1rem .12rem;
    width: 100%;
    height: .7rem;
    padding: .12rem .12rem;
    position: fixed;
    background-color: white;
    bottom: 0;
    display: flex;
    button{
        width: 100%;
        height: 100%;
        background-color:#00CBCC;
        border: none;
        color: white;
    }
}
`
export{
    DetailWrapper,
    SwiperDiv,
    BuyWrapper
}